<div class="d-flex justify-content-center">
  <mat-card class="my-4 w-50">
    <mat-card-header
      class="custom-card-header justify-content-between mat-elevation-z2"
    >
      <mat-card-title class="mat-h1"> User Registration </mat-card-title>
      <div>
        <span class="mat-h4">Already Registered? </span>
        <button mat-raised-button [routerLink]="['/login']">Login</button>
      </div>
    </mat-card-header>
    <mat-card-content class="p-3">
      <form [formGroup]="registrationForm" (ngSubmit)="registerUser()">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>First name</mat-label>
          <input
            matInput
            placeholder="First name"
            formControlName="firstname"
            required
          />
          <mat-error
            *ngIf="
              registrationFormControl.firstname.touched &&
              registrationFormControl.firstname.errors?.required
            "
            >First Name is required</mat-error
          >
        </mat-form-field>

        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Last name</mat-label>
          <input
            matInput
            placeholder="Last Name"
            formControlName="lastname"
            required
          />
          <mat-error
            *ngIf="
              registrationFormControl.lastname.touched &&
              registrationFormControl.lastname.errors?.required
            "
            >Last Name is required</mat-error
          >
        </mat-form-field>

        <mat-form-field class="w-100" appearance="outline">
          <mat-label>User name</mat-label>
          <input
            matInput
            placeholder="User name"
            formControlName="username"
            required
          />
          <mat-error
            *ngIf="
              registrationFormControl.username.touched &&
              registrationFormControl.username.errors?.required
            "
            >User Name is required
          </mat-error>
          <mat-error
            *ngIf="
              registrationFormControl.username.touched &&
              registrationFormControl.username.errors?.userNameNotAvailable
            "
            >User Name is not available</mat-error
          >
        </mat-form-field>

        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Password</mat-label>
          <input
            matInput
            placeholder="Password"
            formControlName="password"
            [type]="showPassword ? 'password' : 'text'"
            required
          />
          <mat-icon matSuffix (click)="showPassword = !showPassword">{{
            showPassword ? "visibility_off" : "visibility"
          }}</mat-icon>
          <mat-error
            *ngIf="
              registrationFormControl.password.touched &&
              registrationFormControl.password.errors?.required
            "
            >Password is required
          </mat-error>
          <mat-error
            *ngIf="
              registrationFormControl.password.touched &&
              registrationFormControl.password.errors?.passwordValidation
            "
          >
            Password should have minimum 8 characters, at least 1 uppercase
            letter, 1 lowercase letter and 1 number
          </mat-error>
        </mat-form-field>

        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Confirm Password</mat-label>
          <input
            matInput
            placeholder="Confirm Password"
            formControlName="confirmPassword"
            [type]="showConfirmPassword ? 'password' : 'text'"
            required
          />
          <mat-icon
            matSuffix
            (click)="showConfirmPassword = !showConfirmPassword"
          >
            {{
              showConfirmPassword ? "visibility_off" : "visibility"
            }}</mat-icon
          >
          <mat-error
            *ngIf="
              registrationFormControl.confirmPassword.touched &&
              registrationFormControl.confirmPassword.errors?.required
            "
            >Password is required
          </mat-error>
          <mat-error
            *ngIf="
              registrationFormControl.confirmPassword.touched &&
              registrationFormControl.confirmPassword.errors?.passwordMismatch
            "
          >
            Password do not match
          </mat-error>
        </mat-form-field>

        <mat-label>Gender:</mat-label>
        <mat-radio-group formControlName="gender">
          <mat-radio-button value="Male"> Male </mat-radio-button>
          <mat-radio-button value="Female"> Female </mat-radio-button>
        </mat-radio-group>
        <mat-error
          *ngIf="
            registrationFormControl.gender.touched &&
            registrationFormControl.gender.errors?.required
          "
          >Gender is required</mat-error
        >
        <mat-card-actions align="end" class="p-0">
          <button mat-raised-button color="primary">Register</button>
        </mat-card-actions>
      </form>
    </mat-card-content>
  </mat-card>
</div>
